{% extends 'template.html' %}
{% block title %}
    Files
{% endblock %}
{% block navList %}
    <li class="sidebar-list-item">
        <a href="/dashboard" class="sidebar-link text-muted active">
            <i class="o-home-1 mr-3 text-gray"></i><span>Overview</span>
        </a>
    </li>
    <li class="sidebar-list-item"><a href="/files" class="sidebar-link text-muted">
        <i class="o-sales-up-1 mr-3 text-gray"></i><span>Files</span></a>
    </li>
{% endblock %}
{% block body %}
    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">
            <section class="py-5">
                <div class="row">
                    <div class="col-xl-3 col-lg-6 mb-4 mb-xl-0">
                        <div class="bg-white shadow roundy p-4 h-100 d-flex align-items-center justify-content-between">
                            <div class="flex-grow-1 d-flex align-items-center">
                                <div class="dot mr-3 bg-violet"></div>
                                <div class="text">
                                    <h6 class="mb-0">Data consumed</h6><span class="text-gray">{{ size }} KB</span>
                                </div>
                            </div>
                            <div class="icon text-white bg-violet"><i class="fas fa-server"></i></div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 mb-4 mb-xl-0">
                        <div class="bg-white shadow roundy p-4 h-100 d-flex align-items-center justify-content-between">
                            <div class="flex-grow-1 d-flex align-items-center">
                                <div class="dot mr-3 bg-blue"></div>
                                <div class="text">
                                    <h6 class="mb-0">Work files</h6><span class="text-gray">{{ count }} files</span>
                                </div>
                            </div>
                            <div class="icon text-white bg-blue"><i class="fa fa-dolly-flatbed"></i></div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 mb-4 mb-xl-0">
                        <div class="bg-white shadow roundy p-4 h-100 d-flex align-items-center justify-content-between">
                            <div class="flex-grow-1 d-flex align-items-center">
                                <div class="dot mr-3 bg-red"></div>
                                <div class="text">
                                    <h6 class="mb-0">Remaining space</h6><span class="text-gray">{{ ram }} KB</span>
                                </div>
                            </div>
                            <div class="icon text-white bg-red"><i class="fas fa-receipt"></i></div>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="row mb-4">
                    <div class="col-lg-6 mb-4 mb-lg-0 pl-lg-0">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="row align-items-center flex-row">
                                    <div class="col-lg-5">
                                        <h2 class="mb-0 d-flex align-items-center">
                                            <span>{{ size }} / {{ max_ram }}</span>
                                            {% if occupy %}
                                                <span class="dot bg-green d-inline-block ml-3"></span>
                                            {% else %}
                                                <span class="dot bg-red d-inline-block ml-3"></span>
                                            {% endif %}
                                        </h2>
                                        <span class="text-muted text-uppercase small">Work RAM</span>
                                        <hr>
                                        <small class="text-muted">The amount of memory used</small>
                                    </div>
                                    <div class="col-lg-7">
                                        <canvas id="pieChart" using="{{ size }}" max="{{ max_ram }}"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}